<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>Document</title>
</head>
<style>
    html {
        overflow: hidden;
    }

    html,
    body,
    .med-page {
        height: 100%;
    }

    .med-row>span {
        display: inline-block;
        width: 180px;
        text-align: center;
    }

    .med-btn {
        border: 0 none;
        background-color: #39f;
        border-radius: 4px;
        color: #fff;
        padding: 8px 10px;
        min-width: 60px;
    }

    .med-section {
        border-top: 2px solid #39f;
        padding-top: 30px;
        background: #fff;
        padding-left: 10px;
        padding-right: 10px;

    }

    .title {
        font-size: 20px;
    }

    .small {
        margin-top: 10px;
        font-size: 14px;
    }

    .tip {
        color: red;
    }

    .tip dt {
        font-weight: normal;
    }

    .tip dd {
        text-indent: 3em;
    }

    .med-page_title {
        margin: 15px 0;
        font-size: 18px;
    }

    /* 面包屑 */
    .med-mbx {
        font-size: 14px;
        text-align: right;
        width: 400px;
    }

    .med-mbx a:not(:last-of-type)::after {
        font-size: 12px;
        line-height: 1.2;
        content: ">"

    }

    /* seacrch */
    .med-table-search {
        padding-left: 15px;
        padding-right: 15px;

    }

    .med-table-search_item {
        margin-bottom: 15px;
    }

    .table>thead>tr>th,
    .table>tbody>tr>td {
        /* text-align: center; */
        vertical-align: middle
    }

    .table td span {
        min-width: 60px;
        display: inline-block;
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; */
    }

    .med-table_footer {
        line-height: 35px;
    }

    .container-table {
        position: relative;
    }

    .container-table_head {
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .container-table_content {
        height: 100%;
        overflow: auto;
    }

    /* 分页 */
    .pagination {
        margin: 0;
    }

    .pagination a {
        cursor: pointer;
    }

    .pagination .active {
        color: #333;
        pointer-events: none;
    }

    .table-click {
        color: #39f;
        cursor: pointer;
    }

    .med-model {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .med-model_content {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        margin: auto;
        width: 800px;
        min-height: 600px;
        padding: 15px;
        background: #fff;
        box-shadow: 0 0 2px 5px rgba(0, 0, 0, .1)
    }

    /* // tree */
    .med-table thead,
    .med-table.treetable thead {
        background: #f1f1f1;
    }

    .collapsed.leaf {
        display: none !important;
    }

    .med-table.treetable thead tr th,
    .med-table.treetable {

        border-color: #ccc;
    }

    table.treetable tr.branch {
        background: none;
    }

    .med-table.treetable thead tr th {
        height: 32px;
    }

    .med-table.treetable tbody tr td {
        padding: 8px;
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

    /* .med-table.treetable thead tr th,
    .med-table td:not(:first-of-type) {
        text-align: center;
    } */
</style>

<body>
    <div class="med-page">
        <h1 class="med-page_title">
            药品生产企业信用评分
        </h1>
        <div class="med-section">
            <h2 class="text-center title">
                江苏恒瑞医药股份有限公司
                <p class="small">
                    2019年04月履约评分
                </p>
            </h2>
            <!-- search end-->
            <section class="container-table">
                <div class="container-table_head"></div>
                <div class="container-table_content">
                    <table id="main" class="med-table table table-bordered table-responsive">
                        <thead>
                            <tr>
                                <th>
                                    信用指标
                                </th>
                                <th>
                                    评分标准
                                </th>
                                <th>
                                    分值
                                </th>
                                <th>
                                    考核项目完成情况
                                </th>
                                <th>
                                    系统扣分
                                </th>
                                <th>
                                    最终扣分
                                </th>
                                <th>
                                    扣分变更原因
                                </th>
                                <th>
                                    扣分备注
                                </th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                    <dl class="tip">
                        <dt>
                            备注：1.每项考评指标扣分以该项指标设定分值为限，扣完为止；
                        </dt>
                        <dd>
                            2.评分方式来源包括但不限于线上采集、举报投诉、医疗机构、部门提供、司法判决等。
                        </dd>
                    </dl>
                    <div class="footer text-center">
                        <button id="save" class="btn btn-primary">
                            保 存
                        </button>
                        <button id="back" class="btn btn-default">
                            取 消
                        </button>
                    </div>
                </div>
                <!-- <div class="med-table_footer">
                    共<span rel='total'>0</span>条数据
                    <ul class="pagination pull-right">
                        <li><a rel="prev">&laquo;</a></li>
                        <li><a rel="next">&raquo;</a></li>
                    </ul>
                </div> -->


            </section>

        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            // 主表格容器
            var $containerMain = $(".container-table");
            var $tableHead = $('.container-table_head');

            // 主表格
            var $main = $("#main");
            var $searchItem = $("[data-id]");
            // 当前页面
            var pageIndex = 1;
            // 总页数
            var pageTotal = 0;
            var $next = $("[rel=next]");
            var $prev = $("[rel=prev]");
            // 对话框
            var $model = $('.med-model');
            var $table = ""

            /**
             * init list
            */
            function initList(params) {
                $.extend(params, {
                    // 添加其他参数
                    pageIndex: pageIndex
                })
                setPage();
                $.get("#", params, function (res) {
                    if (!res) return;
                    // pageTotal = 6; // 总页数
                    var total = 11;
                    // 数据逻辑    
                    var data = [
                        {
                            field1: '平台登录及公告阅读（5分）',//名称
                            field1_merge:2,
                            field2: '每周（按自然周计，以系统登录记录为准）未登录平台，一次扣5分',
                            field3: '1',
                            field3_merge:2,
                            field4: '本月应登录次数：5 实际登录次数：1',
                            field5: '4',
                            field5_merge:2,
                            field6: '5',
                            field6_merge:2,
                            field7: '6',
                            field7_merge:2,
                            field8: '7',
                            field8_merge:2,
                        },
                        {
                            field1: '平台登录及公告阅读（5分）',//名称
                            field1_merge:0,
                            field2: '每周（按自然周计，以系统登录记录为准）未登录平台，一次扣5分',
                            field3: '1',
                            field3_merge:0,
                            field4: '本月应登录次数：5 实际登录次数：1',
                            field5: '4',
                            field5_merge:0,
                            field6: '5',
                            field6_merge:0,
                            field7: '6',
                            field7_merge:0,
                            field8: '7',
                            field8_merge:0,
                        },
                        {
                            field1: '平台登录及公告阅读（5分）',//名称
                            field2: '每周（按自然周计，以系统登录记录为准）未登录平台，一次扣5分',
                            field3: '1',
                            field4: '本月应登录次数：5 实际登录次数：1',
                            field5: '4',
                            field6: '5',
                            field7: '6',
                            field8: '7',
                        },
                    ];

                    // 业务逻辑    
                    var html = createListTr(data)
                    var footer = "<tr><td colspan='3' class='text-right'>总分 </td><td colspan='20'>" +
                        total
                        + "</td></tr>"
                    $main.find("tbody").html(html + footer)
                    // init fixed head
                    initHead();
                    // 弹出窗
                    $(".table-click").on("click", function () {
                        var index = $(this).parent().index();
                        var row = data[index];
                        $model.fadeIn();
                        initModel(row)
                    })
                    $("[rel=total]").text(total);
                    // 初始化 分页
                    $("[rel=page]").parent().remove();
                    var page = ''
                    for (var i = 0; i < pageTotal; i++) {
                        let num = Number(i + 1);
                        page += '<li><a rel="page" class="' + (num === pageIndex ? "active" : '') + '" >' + num + '</a></li>'

                    }
                    $("[rel=next]").parent().before(page)
                    $("[rel=page]").on("click", function () {
                        var index = Number($(this).html());
                        pageIndex = index;
                        initList()
                    })

                })

            }
            initList()

            $next.on("click", function () {
                pageIndex++
                initList();
            })

            $prev.on("click", function () {
                pageIndex--
                initList();
            })

            $("#back").on('click', function () {
                window.location.go(-1)
            })
            $("#save").on('click', function () {
                var params = [];
                $(".container-table_content [data-id]").each(function(){
                    var obj = {};
                    $(this).find("[data-key]").each(function(){
                        var key = $(this).data('key');
                        obj[key] = $(this).val();
                    })
                    params.push(obj)
                })
                console.log(params)
            })
            /**
             *  分页处理
            **/
            function setPage() {
                if (pageIndex === pageTotal) {
                    $next.addClass("active")
                    $prev.removeClass("active")
                } else if (pageIndex === 1) {
                    $next.removeClass("active")
                    $prev.addClass("active")
                } else {
                    $next.removeClass("active")
                    $prev.removeClass("active")
                }
            }

            $(window).on('resize', initHead)
            // 初始固定表格
            function initHead() {
                var winh = $("body").height();
                var top = $containerMain[0].getBoundingClientRect().top
                $containerMain.height(winh - top);
                var $tableContent = $containerMain.find(".container-table_content")
                var tableCopy = $tableContent.html();
                // 获得可视区域的宽度 
                var tableContentWidth = $tableContent[0].clientWidth
                var theadHeight = $main.find("thead").height();
                $tableHead.html(tableCopy).height(theadHeight).width(tableContentWidth)
            }
            /***
             * 生成对应行
             * @param {Object} data 行数据
             * 请修改对应的字段
             */
            function createListTr(data) {
                var html = '';

                $.each(data, function (i, item) {
                    html += "<tr data-id='" + item.id + "'>"
                        + createListTd('field1', item)
                        + createListTd('field2', item)
                        + createListTd('field3', item)
                        + createListTd('field4', item)
                        + createListTd('field5', item)
                        + createListTd('field6', item)
                        + createListTd('field7', item, {
                            width: '160px',
                            type: 'input'
                        })
                        + createListTd('field8', item, {
                            width: '160px',
                            type: 'input'
                        })
                        + "</tr>"

                })

                return html
            }
            /**
            * 创建合并表格
            * @param {String} key 对应字段
            * @param { Object } data 行数据
            * @param {Objec} option 配置
            */
            function createListTd(key, data, option) {
                var space = "_merge";
                var span = data[key + space];
                var options = option || {};
                var valueObject = data[key]
                // input
                if (options.type === 'input') {
                    valueObject = '<input data-key="' + key + '" value="' + data[key] + '" />'
                }
                return "<td class='" + options.className + "' rowspan='" + span + "'  style='width:" + (options.width ? options.width : '') + " ;display:" + (span === 0 ? 'none' : '') + "' ><span>" + valueObject + "</span></td>"
            }

        })
    </script>

</body>

</html>